<template>
  <div class="box-bottom">
    <div>报警类型统计</div>
    <div id="leftEchart" class="conton"></div>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import baseService from "@/service/baseService";
import * as echarts from "echarts";

export default defineComponent({
  name: "RealTimeTree",
  setup() {
    const state = reactive({
      myChart: null,
      stationData: []
    });
    return {...useView(state), ...toRefs(state)};
  },
  mounted() {
    let chartDom = document.getElementById("leftEchart");
    this.myChart = echarts.init(chartDom);
    this.getInfo();
  },
  methods: {
    // 获取信息
    getInfo() {
      baseService.get(`/homeData/getWarningType`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        let legendData = Object.entries(res.data).map(([name]) => (name));
        let seriesData = Object.entries(res.data).map(([name, value]) => ({name, value}));

        let sum = 0;
        seriesData.forEach((i) => {
          sum = sum + i.value;
        })

        let option = {
          tooltip: {
            trigger: "item"
          },
          legend: {
            orient: "vertical",
            right: "right",
            top: "top",
            show: true,
            icon: "circle",
            textStyle: {
              color: "#fff",
              width: 130,
              overflow: "truncate",
              ellipsis: "..."
              // padding: "[1,50]"
            },
            data: legendData
          },
          series: [
            {
              name: "报警类型统计",
              type: "pie",
              radius: ["55%", "70%"],
              avoidLabelOverlap: true,
              left: "0",
              width: "60%",
              itemStyle: {
                borderColor: "rgba(169, 220, 230, 0)",
                borderWidth: 3
              },
              label: {
                normal: {
                  show: true,
                  position: "center",
                  color: "#4c4a4a",
                  formatter: "{total|" + sum + "}" + "\n" + "{active|总预警}",
                  rich: {
                    total: {
                      fontSize: 20,
                      fontFamily: "微软雅黑",
                      color: "#bed4e2"
                    },
                    active: {
                      fontFamily: "微软雅黑",
                      fontSize: 12,
                      color: "#12dbf2",
                      lineHeight: 30
                    }
                  }
                }
              },
              emptyCircleStyle: {
                borderWidth: 0
              },
              emphasis: {
                label: {
                  show: true
                }
              },
              labelLine: {
                show: false
              },
              data: seriesData
            }
          ]
        };

        option && this.myChart.setOption(option);
      });
    }
  }
});
</script>

<style lang="scss" scoped>
.box-bottom {
  color: #bed4e2;
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: hidden;
  position: relative;
  flex: 1;

  .conton {
    width: 100%;
    height: 90%;
  }
}
</style>
